<template>
    <div class="addProductInfo">
        <el-card shadow="never" style="width:100% ; border:none">
            <div slot="header">
                <span class="search-title">资质信息</span>
            </div>
            <el-form :model="baseInfoForm" :rules="rules" ref="ruleForm" label-width="100px">
                <el-form-item label="合作协议" prop="protocals">
                    <el-row>
                        <el-col
                            v-for="(imgUrl, index) in baseInfoForm.protocals"
                            :key="index"
                            class="img-urls"
                        >
                            <span class="coverImg">
                                <i class="el-icon-close deleteImg" @click="deleteImg(0, imgUrl)" />
                            </span>
                            <el-image
                                :src="createNativeFileUrl(imgUrl)"
                                fit="fill"
                                class="image-slot"
                                style="width: 180px; height: 180px;"
                            >
                                <div slot="error" class="image-slot">
                                    <i
                                        class="el-icon-picture-outline"
                                        style="width: 100%; height: 100%"
                                    ></i>
                                </div>
                            </el-image>
                        </el-col>
                        <div class="img-add">
                            <div class="img-uploader">
                                <i
                                    class="el-icon-plus img-uploader-icon"
                                    @click="showPictureSelect(0)"
                                ></i>
                            </div>
                        </div>
                    </el-row>
                </el-form-item>

                <el-form-item label="营业执照" prop="licenses">
                    <el-row>
                        <el-col
                            v-for="(imgUrl, index) in baseInfoForm.licenses"
                            :key="index"
                            class="img-urls"
                        >
                            <span class="coverImg">
                                <i class="el-icon-close deleteImg" @click="deleteImg(1, imgUrl)" />
                            </span>
                            <el-image
                                :src="createNativeFileUrl(imgUrl)"
                                fit="fill"
                                class="image-slot"
                                style="width: 180px; height: 180px;"
                            >
                                <div slot="error" class="image-slot">
                                    <i
                                        class="el-icon-picture-outline"
                                        style="width: 100%; height: 100%"
                                    ></i>
                                </div>
                            </el-image>
                        </el-col>
                        <div class="img-add">
                            <div class="img-uploader">
                                <i
                                    class="el-icon-plus img-uploader-icon"
                                    @click="showPictureSelect(1)"
                                ></i>
                            </div>
                        </div>
                    </el-row>
                </el-form-item>

                <el-form-item label="其他资质" prop="others">
                    <el-row>
                        <el-col
                            v-for="(imgUrl, index) in baseInfoForm.others"
                            :key="index"
                            class="img-urls"
                        >
                            <span class="coverImg">
                                <i class="el-icon-close deleteImg" @click="deleteImg(2, imgUrl)" />
                            </span>
                            <el-image
                                :src="createNativeFileUrl(imgUrl)"
                                fit="fill"
                                class="image-slot"
                                style="width: 180px; height: 180px;"
                            >
                                <div slot="error" class="image-slot">
                                    <i
                                        class="el-icon-picture-outline"
                                        style="width: 100%; height: 100%"
                                    ></i>
                                </div>
                            </el-image>
                        </el-col>
                        <div class="img-add">
                            <div class="img-uploader">
                                <i
                                    class="el-icon-plus img-uploader-icon"
                                    @click="showPictureSelect(2)"
                                ></i>
                            </div>
                        </div>
                    </el-row>
                </el-form-item>
            </el-form>
            <!-- </el-main> -->
        </el-card>
        <!-- </el-container> -->

        <div v-if="showSelectPicture">
            <el-dialog title="选择图片" :visible.sync="showSelectPicture" width="900px">
                <select-picture
                    @select="handleConfirmSelectPicture"
                    @close="handleCloseSelectPicture"
                ></select-picture>
            </el-dialog>
        </div>

        <input
            type="file"
            @change="callBackFileInput(0)"
            style="filter:alpha(opacity=0);opacity:0;width: 0;height: 0;"
            accept="image/*"
            ref="fileInput0"
        />
        <input
            type="file"
            @change="callBackFileInput(1)"
            style="filter:alpha(opacity=0);opacity:0;width: 0;height: 0;"
            accept="image/*"
            ref="fileInput1"
        />
        <input
            type="file"
            @change="callBackFileInput(2)"
            style="filter:alpha(opacity=0);opacity:0;width: 0;height: 0;"
            accept="image/*"
            ref="fileInput2"
        />
    </div>
</template>
<script>
import SelectPicture from '@/components/ImageGroup/selectPicture';
import { getCateList, checkGoodName } from '@/api/goodsBase';
import { getCortList } from '@/api/cornerMark';
import { validatInteger } from '@/utils/validate.js';
import { mapGetters } from 'vuex';
export default {
    name: 'baseInfo',
    mounted() {
        this.init();
        // 此阶段props值不一定能取到，使用路由判断
        if (this.$route.path.indexOf('updateProduct') > -1) {
            console.log(this.supplierDetailInfo);
            this.opmode = 1;
        } else {
            this.opmode = 0;
        }
    },
    components: { SelectPicture },
    computed: {
        ...mapGetters(['supplierDetailInfo'])
    },
    watch: {
        supplierDetailInfo: function() {
            const dic = ['protocals', 'licenses', 'others'];
            this.baseInfoForm = {
                ...this.baseInfoForm,
                ...this.supplierDetailInfo
            };
            dic.forEach(key=>{
                if (this.supplierDetailInfo[key]) {
                    console.log(this.supplierDetailInfo[key])
                    this.baseInfoForm[key] = this.supplierDetailInfo[key].map(el=>{
                        return el.url;
                    })
                }
            })
        }
    },
    porps: {
        mode: 1
    },
    data() {
        return {
            opmode: 0,
            baseInfoForm: {
                protocals: [],
                others: [],
                licenses: []
            },
            rules: {},
            showSelectPicture: false
        };
    },
    methods: {
        init() {},
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        validateForm() {
            return this.$refs['ruleForm'].validate();
        },

        showPictureSelect(option) {
            this.pictureOption = option;
            let inputButton = this.$refs['fileInput' + option];
            inputButton.click();
        },
        callBackFileInput(index) {
            const dic = ['protocals', 'licenses', 'others'];
            let inputButton = this.$refs['fileInput' + index];
            if (inputButton) {
                let imgList = this.baseInfoForm[dic[index]];
                let img = inputButton.files[0];
                if (imgList.indexOf(img) > -1) {
                    this.$message.error('请勿重复选择图片');
                } else {
                    this.baseInfoForm[dic[index]].push(img);
                }
                inputButton.value = null; // 最后清空
            }
            // console.log(inputButton.value);
        },
        createNativeFileUrl(file) {
            if (!(file instanceof File)) {
                return file
            }
            var url = null;
            if (window.createObjectURL != undefined) {
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) {
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) {
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        },
        handleConfirmSelectPicture(imageUrl) {
            const dic = ['protocals', 'licenses', 'others'];
        },
        handleCloseSelectPicture() {
            this.showSelectPicture = false;
        },
        deleteImg(option, imgUrl) {
            console.log('delete');
            const dic = ['protocals', 'licenses', 'others'];
            let imgList = this.baseInfoForm[dic[option]];
            this.baseInfoForm[dic[option]] = this.baseInfoForm[dic[option]].filter(
                el => el !== imgUrl
            );
        }
    }
};
</script>

<style scoped>
.search-title {
    font-size: 18px;
    font-weight: bold;
}
.form-container {
    padding: 0px;
}

.image-slot {
    width: 50px;
    height: 50px;
}
.img-add {
    width: 180px;
    display: inline-block;
    vertical-align: top;
    margin-top: 10px;
}
</style>

<style lang="scss">
.addProductInfo {
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .img-uploader {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        box-sizing: inherit;
        display: inline-block;
        // position: relative;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    .avatar-uploader-icon {
        cursor: pointer;
        border: 1px dashed #d9d9d9;
        font-size: 28px;
        color: #8c939d;
        width: 320px;
        height: 180px;
        line-height: 180px;
        text-align: center;
    }

    .img-uploader-icon {
        font-size: 28px;
        cursor: pointer;
        color: #8c939d;
        width: 180px;
        height: 180px;
        line-height: 180px;
        text-align: center;
    }
    .avatar {
        width: 320px;
        height: 180px;
        display: block;
        cursor: pointer;
    }
    .advice-vedio {
        margin-left: 15px;
        line-height: 180px;
        text-align: center;
        cursor: pointer;
    }
    .el-radio__label {
        display: none;
    }
    .el-radio {
        display: flex;
        justify-content: center;
    }
    .coverImg {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        cursor: default;
        text-align: center;
        color: #fff;
        opacity: 0;
        font-size: 20px;
        background-color: rgba(0, 0, 0, 0.3);
        transition: opacity 0.3s;
        z-index: 100;
    }
    .coverImg:hover {
        z-index: 100;
        opacity: 1;
    }
    .deleteImg {
        float: right;
        margin-right: 2px;
        margin-top: 3px;
        cursor: pointer;
    }
    .img-urls {
        width: 180px;
        height: 180px;
        margin-right: 10px;
        margin-top: 10px;
        display: inline-block;
        position: relative;
    }
}
</style>
